<template>
  <div class="divSection resultPage">
    <img class="resultBg" src="static/images/resultBg.png">
    <img class="plug" src="static/images/plug.png">
    <img class="light" src="static/images/light.png">
    <img class="result" src="static/images/result.png">   
    <div class="energyBar" id="energyBar"></div>
    <canvas id="energyCanv" class="energyCanv"></canvas>
    <img id="imgEnergy" class="imgEnergy" src="static/images/pentagon.png">
    <div class="goProduct" @click="clickToProduct"></div>
    <div class="energyNumS"><span>{{energy}}</span></div> 
    <div class="energyNumB" v-show="isshowEnergy"><span>{{energy}}</span></div> 
  </div>  
</template>
<style type="text/css">
 .resultPage{
  position: absolute;
  top:0;
  left: 0;
  background-position: bottom center;
  background-size: 100% auto;
}
.resultBg{
  z-index: 100;
  width: 100%;
  left: 0rem;
  bottom: 0rem;
  position: absolute;
}
.result{
 z-index: 100;
 position: absolute;
 width: 100%;
 left: 0rem;
 bottom: 0rem;
}
.energyBar{
  bottom: 11.92rem;
  left: 2.33rem;
  width: 5.507rem;
  height: 0.48rem;
  position: absolute;
  background:url('../../public/static/images/energyBar.png');
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 0% 100%;
  z-index: 100;
}
.imgEnergy{
  position: absolute;
  width: 487px;
  height: 466px;
  z-index: 0;
}
.energyCanv{
  position: absolute;
  width: 6.493rem;
  height:6.213rem;
  left: 1.76rem;
  bottom: 4.5rem;
  z-index: 9999;
}
.plug{
  bottom: 2.1rem;
  left: 1.6rem;
  width: 0.88rem;
  height: 0.547rem;
  position: absolute;
  z-index: 150;
  animation: plugAction 4s infinite;
  -webkit-animation:plugAction 4s linear infinite;
}
@keyframes plugAction{
  50% {left:1.9rem;}
  100% {left: 1.6rem;}
}
.light{
  bottom: 2.1rem;
  left: 7.4rem;
  width: 0.36rem;
  height: 0.56rem;
  position: absolute;
  z-index: 150;
  animation: lightAction 2s infinite;
  -webkit-animation:lightAction 2s linear infinite;
}
@keyframes lightAction{
  50% {opacity:0;}
  100% {opacity: 1}
}
.goProduct{
  position: absolute;
  bottom: 1.9rem;
  left: 2.6rem;
  width: 5.5rem;
  height: 1rem;
  background-color: #fff;
  opacity: 0;
  z-index: 9999;
}
.energyNumS{
  position: absolute;
  left: 7.65rem;
  bottom: 13.3rem;
  color: #fff;
  font-size: 0.68rem;
  z-index: 9999;
}
.energyNumB{
  position: absolute;
  left: 4.1rem;
  bottom: 6.5rem;
  color: #fff;
  font-size: 1.5rem;
  z-index: 9999;
}
</style>
<script type="text/javascript">
  export default{
    data(){
      return {
        scores:[],
        energy:0,
        intervalID:0,
        pointArr:[[240,250],[240,6],[4,180],[95,460],[390,462],[482,180]],
        isshowEnergy:false
      }
    },
    methods:{
      showResult:function(){
       //window.scoreArr = [60,16,11,14,9,10];
       this.scores = window.scoreArr;
       window.energy = this.scores[0];
       this.resetPoint();
       this.startEnergy();
     },
     startEnergy:function(){
      this.intervalID=setInterval(this.setEnergy, 20);                         
      // var img = document.getElementById("imgEnergy");
      // img.crossOrigin = 'Anonymous'; 
      // img.src = "./static/images/pentagon.png";
    },
    setEnergy:function(){
      this.energy++;
      $("#energyBar").css("background-size",this.energy+"% 100%");
      if(this.energy>=window.energy){
        clearInterval(this.intervalID);
        this.drawEnergyCanv();
      }
    },
    resetPoint:function(){
      var canvas = document.getElementById("energyCanv");
      var img = document.getElementById("imgEnergy");
      console.log(canvas);
      console.log("canvasWidth:"+canvas.width);
      console.log(img);
      console.log("imgWidth:"+img.width);
      var canvScaleW = canvas.width/img.width;
      var canvScaleH = canvas.height/img.height;
      console.log("canvScale:"+canvScaleW+","+canvScaleH);
      for(var i=0;i<this.pointArr.length;i++ ){
        var point = this.pointArr[i];
        point[0] = point[0]* canvScaleW;
        point[1] = point[1]* canvScaleH;
      }
      console.log(this.pointArr);
    },
    drawEnergyCanv:function(){
      var canvas = document.getElementById("energyCanv");
      var ctx=canvas.getContext("2d");
      var img = document.getElementById("imgEnergy");

      ctx.fillstyle = "red";
      ctx.beginPath();
      var point = this.pointArr[1];
      var pointCenter = this.pointArr[0];
      var percent = this.scores[1]/20;
      var startX = pointCenter[0]-(pointCenter[0] - point[0])*percent;
      var startY = pointCenter[1]-(pointCenter[1] - point[1])*percent;
      ctx.moveTo(startX,startY);
      console.log("this.pointArr:"+this.pointArr);
      for(var i=2;i<this.pointArr.length;i++){
       point = this.pointArr[i];
       percent = this.scores[i]/20;
       var tarX = pointCenter[0]-(pointCenter[0] - point[0])*percent;
       var tarY = pointCenter[1]-(pointCenter[1] - point[1])*percent;
       ctx.lineTo(tarX,tarY);
     }       
       //ctx.fill();
       ctx.clip();        
       ctx.drawImage(img,0,0,canvas.width,canvas.height);
       console.log("w&H:"+canvas.width+","+canvas.height);
       this.isshowEnergy = true;
     },
     clickToProduct:function(){
         //this.$router.push({path:'/productPage'});
         _czc.push(["_trackEvent","weiziSkinTest","click_product",'','','']);
         var vueAppThis = this.$root.vueAppThis
         vueAppThis.$emit('evt_enter_productPage');
       }
     }

   }

 </script>